🎨 Palette: [UX improvement] Add aria-labels to LogsView filters#498
🎨 Palette: [UX improvement] Add aria-labels to LogsView filters#498Dexploarer wants to merge 1 commit into
Conversation
Adds aria-labels to the log level, log source, and log tag select elements in the LogsView component to improve accessibility for screen readers.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![codereviewbot-ai[bot]](https://avatars.githubusercontent.com/in/309638?s=60&v=4){kind=small}
| className="text-xs px-3 py-1.5 border border-border bg-card text-txt cursor-pointer" | ||
| value={logSourceFilter} | ||
| onChange={handleSourceChange} | ||
| aria-label="Filter by log source" | ||
| > | ||
| <option value="">All sources</option> | ||
| {logSources.map((s) => ( |
There was a problem hiding this comment.
Potential runtime error if logSources is undefined or not an array
The code assumes logSources is always an array. If it is undefined or not an array, .map() will throw a runtime error:
{logSources.map((s) => (
<option key={s} value={s}>{s}</option>
))}Recommendation:
Add a defensive check to ensure logSources is an array before mapping:
{Array.isArray(logSources) && logSources.map((s) => (
<option key={s} value={s}>{s}</option>
))}| className="text-xs px-3 py-1.5 border border-border bg-card text-txt cursor-pointer" | ||
| value={logTagFilter} | ||
| onChange={handleTagChange} | ||
| aria-label="Filter by log tag" | ||
| > | ||
| <option value="">All tags</option> | ||
| {logTags.map((tag) => ( |
There was a problem hiding this comment.
Duplicate tag values may cause confusing dropdown options
If logTags contains duplicate values, the dropdown will render multiple identical options, which can confuse users and complicate filter logic:
{logTags.map((tag) => (
<option key={tag} value={tag}>{tag}</option>
))}Recommendation:
Deduplicate logTags before rendering:
{[...new Set(logTags)].map((tag) => (
<option key={tag} value={tag}>{tag}</option>
))}![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
1 participant
💡 What
Added
aria-labelattributes to the threeselectelements used for filtering logs (log level, log source, and log tags) inapps/app/src/components/LogsView.tsx.🎯 Why
To improve accessibility for screen reader users by providing clear context for these dropdown filters.
📸 Before/After
N/A (Invisible semantic HTML change)
♿ Accessibility
Improves screen reader navigation and understanding of form controls in the Logs view.
PR created automatically by Jules for task 12635719310873987237 started by @Dexploarer